<template>
  <div class="app-container">
    <div v-if="user" style="display: flex">
      <user-card :user="user" />

      <div class="activity-contant">
        <Activity />
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import UserCard from "./components/UserCard";
import Activity from "./components/Activity";
import Timeline from "./components/Timeline";
import Account from "./components/Account";

export default {
  name: "Profile",
  components: { UserCard, Activity, Timeline, Account },
  data() {
    return {
      user: {},
      activeTab: "activity",
    };
  },
  computed: {
    ...mapGetters(["username", "avatar", "roles", "userInfo"]),
  },
  created() {
    console.log(this.userInfo);
    this.getUser();
  },
  methods: {
    getUser() {
      this.user = {
        name: this.username,
        role: this.roles.join(" | "),
        email: this.userInfo.email,
        avatar: this.avatar,
        userInfo: this.userInfo,
      };
    },
  },
};
</script>
<style scoped lang="scss">
.activity-contant {
  flex: 1;
  min-height: 600px;
  margin: 30px 30px 0 60px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(84, 121, 231, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
</style>
